<template>
  <div>
    <!-- 预览文件信息 -->
    <div style="width: 1360px;margin: 0 auto;">
      <div class="preViewPage">
        <div v-if="fileType ==='ppt'">

        </div>
        <div v-else-if="fileType === 'practice' || fileType === 'word'">
          <vue-office-docx
            :src="docx"
            style="height: 100vh;"
            @rendered="renderedHandler"
            @error="errorHandler"
          />
        </div>
        <div v-else-if="fileType ==='pdf'">
          <vue-office-pdf
            :src="pdf"
            style="height: 100vh"
            @rendered="renderedHandler"
            @error="errorHandler"
          />
        </div>
        <div v-else-if="fileType === 'excel'">
          <vue-office-excel
            :src="excel"
            :options="options"
            style="height: 100vh;"
            @rendered="renderedHandler"
            @error="errorHandler"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import { getPoints } from '@/api/know/points'

export default {
  components: {
    VueOfficeDocx,
    VueOfficePdf,
    VueOfficeExcel
  },
  data() {
    return {
      token: localStorage.getItem("userToken") ? JSON.parse(localStorage.getItem("userToken")) :null,
      fileType: '',
      ppt:'',
      docx: 'http://static.shanhuxueyuan.com/test6.docx', //设置文档网络地址，可以是相对地址
      pdf: 'http://static.shanhuxueyuan.com/test.pdf',//设置文档地址
      editorM: null,
      id: '',
      fileInfoStyle:{
        width: '300px',
        height: '400px',
      },
      expFileList:[],
      options:{
        xls: false,       //预览xlsx文件设为false；预览xls文件设为true
        minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
        minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
        widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
        heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
        beforeTransformData: (workbookData) => {return workbookData}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
        transformData: (workbookData) => {return workbookData}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
      },
      excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
    }
  },
  methods: {
    login() {
      this.$router.push({ path: '/login' })
    },
    goBack() {
      this.$router.go(-1)
    },
    setDataByFileType(fileType) {
      switch (fileType) {
        case 'ppt':
          this.ppt = this.$route.query.url;
          break;
        case 'word':
        case 'practice':
          this.docx = this.$route.query.url;
          break;
        case 'pdf':
          this.pdf = this.$route.query.url;
          break;
        case 'excel':
          this.excel = this.$route.query.url;
      }
    },
    renderedHandler() {
      console.log("渲染完成")
    },
    errorHandler() {
      console.log("渲染失败")
    }
  },
  mounted() {
    this.fileType = this.$route.query.type;
    this.setDataByFileType(this.fileType);
  }
}
</script>

<style scoped>


</style>
